<script>
  import TodosHeader from "./components/TodosHeader.vue"
  import TodosList from "./components/TodosList.vue"
  import TodosFooter from "@/components/TodosFooter.vue";

  export default {
    name: "App",
    data() {
      return {
        todos: [
          {id:'0001', title:'吃饭', done:false},
          {id:'0002', title:'睡觉', done:false},
          {id:'0003', title:'喝酒', done:true},
        ]
      }
    },
    components: {
      TodosHeader,
      TodosList,
      TodosFooter
    },
    methods: {
      /**
       * 添加代办事项
       * @param todoObj
       */
      addTodo(todoObj) {
        console.log("我是App组件, 我接受到一个todoObj@", todoObj)
        this.todos.unshift(todoObj);
      },
      /**
       * 勾选代办事项
       * @param todoId
       */
      checkTodo(todoId) {
        console.log('handle.checked:', todoId);
        this.todos.forEach(todo => {
            if (todo.id === todoId) {
                return todo.done = !todo.done;
            }
        });
      },
      /**
       * 删除代办事项
       * @param todoId
       */
      deleteTodo(todoId) {
        this.todos = this.todos.filter((todo) => {
          return todo.id !== todoId;
        })
      },
      /**
       * 全选/取消全选
       * @param done
       */
      checkAllTodo(done) {
        this.todos.forEach((todo) => todo.done = done)
      },
      /**
       * 清除所有任务
       */
      clearAllDone() {
        if (confirm('Are you sure you want to clear all done?')) {
          this.todos = this.todos.filter(todo => {
            return todo.done !== true
          })
        }
      }
    }
  }
</script>

<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <TodosHeader :addTodo="addTodo" />
        <TodosList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo" />
        <TodosFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllDone="clearAllDone" />
      </div>
    </div>
  </div>
</template>

<style>
/*base*/
body {
  background: #fff;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

</style>